import React, { useRef, useState, useEffect } from 'react';
import RoleSwitchModal from '@/pages/chat/components/RoleSwitchModal';
import { useUserInfo, useUserState } from '@/store/userStore';
import './styles/userRole.css';
import { useInitializeData } from '@/store/configStore';

interface UserRoleDisplayProps {
  activeKey: string;
}

const UserRoleDisplay: React.FC<UserRoleDisplayProps> = ({ activeKey }) => {
  const { username, role } = useUserInfo();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isDebug, setIsDebug] = useState(false);
  const userNameRef = useRef(null);
  const userNameTextRef = useRef(null);
  const roleRef = useRef(null);
  const textRef = useRef(null);
  const initializeData = useInitializeData();
  const { isGuest } = useUserState();

  useEffect(() => {
    if (activeKey == '5') {
      setTimeout(() => {
        updateScroll(roleRef.current, textRef.current);
        updateScroll(userNameRef.current, userNameTextRef.current);
        console.log(initializeData);
        setIsDebug(initializeData?.debug || false);
      }, 500);
    }
    // console.log(activeKey)
    // const timer = setTimeout(() => {
    //   updateScroll(roleRef.current, textRef.current);
    //   updateScroll(userNameRef.current, userNameTextRef.current);
    //   console.log(initializeData);
    //   setIsDebug(initializeData?.debug || false)
    // }, 500);

    // return () => clearTimeout(timer);
  }, [activeKey]);

  const updateScroll = (roleElement: HTMLElement | null, textElement: HTMLElement | null) => {
    if (roleElement && textElement) {
      const hasOverflow = roleElement.scrollWidth > textElement.clientWidth;
      if (hasOverflow) {
        const translateXValue = `-${
          (1 - textElement.clientWidth / roleElement.scrollWidth) * 100
        }%`;
        roleElement.style.animation = `scrollText 10s linear infinite`;
        // roleElement.style.setProperty('--translateXValue', '-50%');
        roleElement.style.setProperty('--translateXValue', translateXValue);
        console.log(roleElement);
      } 
      else {
        roleElement.style.animationPlayState = 'paused';
      }
    }
  };

  return (
    <>
      <RoleSwitchModal
        open={isModalOpen}
        onOk={() => setIsModalOpen(false)}
        onCancel={() => setIsModalOpen(false)}
      />

      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
        }}
      >
        <div
          style={{
            whiteSpace: 'nowrap',
            overflowX: 'scroll',
            fontSize: '16px',
            fontWeight: 'bold',
            maxWidth: '60px',
            scrollbarWidth: 'none',
            msOverflowStyle: 'none',
          }}
        >
          <div className="scrollable-text" ref={userNameTextRef}>
            <span ref={userNameRef}>{username}</span>
          </div>
        </div>
        <div
          style={{
            maxWidth: '60px',
            fontSize: '10px',
            color: '#666',
            msOverflowStyle: 'none',
            whiteSpace: 'nowrap',
            overflowX: 'hidden',
          }}
        >
          <div
            className={`scrollable-text ${isDebug ? 'cursor-pointer' : ''}`}
            ref={textRef}
            onClick={() => {
              if (isDebug && !isGuest) {
                setIsModalOpen(true);
              }
            }}
          >
            <span ref={roleRef}>{isGuest?'访客':role?.name}</span>
          </div>
        </div>
      </div>
    </>
  );
};

export default UserRoleDisplay;